<!DOCTYPE html>
<html lang="en">

<head>
  <title>响应式绿色环保</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta content="text/html; charset=utf-8" />
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <link href="css/index.css" rel="stylesheet" type="text/css" />
  <link href="css/media.css" rel="stylesheet" type="text/css" media="all" />

</head>

<body>
  <!-- header部分 -->
  <div class="header">
    <div class="container">
      <nav>
        <input type="checkbox" id="togglebox" />
        <ul>
          <li><a class="active" href="index.html">首页</a></li>
          <li><a href="javascript:;">分类方法</a></li>
          <li><a href="javascript:;">分类指南</a></li>
          <li><a href="javascript:;">关于我们</a></li>
          <li><a href="javascript:;">联系我们</a></li>
        </ul>
      </nav>
      <!--汉堡菜单按钮-->
      <label class="menu" for="togglebox">
        <img src="images/menu.png" />
      </label>
      <!-- logo图标 -->
      <div class="logo">
        <a href="index.html"><img src="images/logo.png" /></a>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
  <!-- banner部分 -->
  <div class="banner"></div>
  <!-- mission部分 -->
  <div class="mission">
    <div class="container">
      <div class="mission-header">
        <h3>我们的使命</h3>
      </div>
      <div class="mission-container">
        <div class="mission_div mission-left">
          <img src="images/mission_img.jpg" alt="" />
        </div>
        <div class="mission_div mission-right">
          <div class="mis-one">
            <div class="mis-left">
              <img src="images/i1.gif" alt="" />
            </div>
            <div class="mis-right">
              <h3>治理污染</h3>
              <p>将环境保护纳入国民经济与社会发展计划和年度计划，在经济发展
                中防治环境污染和生态破坏。 </p>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="mis-one">
            <div class="mis-left">
              <img src="images/i2.gif" alt="" />
            </div>
            <div class="mis-right">
              <h3>垃圾分类</h3>
              <p>关心垃圾分类，特别是可回收垃圾，进行回收再生，减少对森林树木
                的采集砍伐。</p>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="mis-one">
            <div class="mis-left">
              <img src="images/i3.gif" alt="" />
            </div>
            <div class="mis-right">
              <h3>节能低碳</h3>
              <p>开始低碳生活吧，节能减排，减少对资源的浪费，并还自己一片蓝天！</p>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
  <!-- footer部分 -->
  <div class="footer">
    <div class="container">
      <p> Copyright 2021 爱护环境. All Rights Reserved by<a href="#"> 绿色生态网</a></p>
      <div class="clearfix"></div>
    </div>
  </div>

</body>

</html>